<template>
    <div id="example" style="width:100%;" class="page whitepage">
        <div class="manapage">
            <div class="addBrand">
                <span>*最多可绑定3张车牌</span>
                <a v-if="items.length < 3" class="addbtn" @click="addCar()"></a>
            </div>
            <ul class="brandList" v-for="(item,key) in items" :key="key">
                <li>
                    <div class="brand" style="padding: 0px;">
                        <div class="inner plate-bind-inbox">
                            <span>{{ item.numberPlate }}</span>
                        </div>
                    </div>
                    <a class="delete" @click="delCar(item.id)"></a>
                </li>
            </ul>

            <div class="enterWrap" v-if="!success">
                <div class="bind">
                    <div class="brand brand-long">
                        <div id="bindCar" class="inner binding-inner">
                            <input class="bindCarInput" id="font" @click="btnClickYue" v-bind:class="{active: isYue }"
                                   type="text" maxlength="1" :value="areaName" readonly="readonly">
                            <input class="bindCarInput" id='letter' @click="btnClickA" v-bind:class="{active: isA}"
                                   type="text" maxlength="1" :value="areaLetter" readonly="readonly">
                            <input class="bindCarInput" id='numOne' @click="btnClickNum('one')"
                                   v-bind:class="{active: isNumOne }" type="text" maxlength="1" :value="numOne"
                                   readonly="readonly">
                            <input class="bindCarInput" id='numTwo' @click="btnClickNum('two')"
                                   v-bind:class="{active: isNumTwo }" type="text" maxlength="1" :value="numTwo"
                                   readonly="readonly">
                            <input class="bindCarInput" id='numThree' @click="btnClickNum('three')"
                                   v-bind:class="{active: isNumThree }" type="text" maxlength="1" :value="numThree"
                                   readonly="readonly">
                            <input class="bindCarInput" id='numFour' @click="btnClickNum('four')"
                                   v-bind:class="{active: isNumFour }" type="text" maxlength="1" :value="numFour"
                                   readonly="readonly">
                            <input class="bindCarInput" id='numFive' @click="btnClickNum('five')"
                                   v-bind:class="{active: isNumFive }" type="text" maxlength="1" :value="numFive"
                                   readonly="readonly">
                            <input class="bindCarInput" v-if="checkbox" id='numSix' @click="btnClickNum('six')"
                                   v-bind:class="{active: isNumSix }" type="text" maxlength="1" :value="numSix"
                                   readonly="readonly" placeholder="+">
                        </div>
                    </div>
                </div>
                <div class="btns">
                    <a class="orangebtn fl border-white" @click="btnCanel">取消</a>
                    <a class="greenbtn submit-add fr border-white" @click="bindingAdd()">提交</a>
                </div>
            </div>
        </div>

        <div class="park-detail">
            <p>1、收费标准：3元/辆·小时；</p>
            <p>2、优惠时段：法定工作日营业时间6:30-次日2:30，首进免费停车4小时，其余时段按收费标准收费；</p>
            <p>3、环宇城会员：30积分=停车1小时（超出免费时段）；</p>
            <p>4、停车不足1小时按1小时计费，停车总费用采取营业时段、夜间时段分段计费汇总方式计算；</p>
            <p>5、请缴费后于30分钟内出车，超出将重新计费；</p>
            <p>6、无牌车辆无法使用会员积分支付停车费，敬请留意。</p>
        </div>

        <div class="keyboard" v-if="keyboardShow" :class='{animationDown:isDown,animationUp:isUp}'>
            <button class="btn-complete" @click="completeClick('false')"><span>完成</span></button>
            <div v-if="keyboard == 'txt'">
                <div class="keyboard-row" v-for="(item,rows,key) in carTxt" :key="key">
                    <button class="keyboard-row-item" v-for="(i,index,key) in item.name" :key="key"
                            @click="btnWordClick(rows,index,i)">{{i}}
                    </button>
                </div>
                <div class="keyboard-row">
                    <button class="keyboard-row-item" @click="btnBottomClick('鲁')">鲁</button>
                    <button class="keyboard-row-item" @click="btnBottomClick('使')">使</button>
                    <button class="keyboard-row-item" @click="btnBottomClick('领')">领</button>
                    <button v-for="(j,key) in noneBottom" :key=key class="none-botton">{{j}}</button>
                    <div class="keyboard-row-item clear" @click="clearClick">
                        　<img src="./img/del.png" alt="删除">
                    </div>
                </div>
            </div>
            <div v-if="keyboard == 'num'">
                <div class="keyboard-row keybyn" v-for="(item,rows,key) in carNum" :key="key">
                    <button :disabled="!isSelectl?isDisable && i<10 :isDisable&& rows!=0 " class="keyboard-row-item"
                            v-for="(i,index,key) in item.name" :key="key" @click="btnWordClick(rows,index,i)">{{i}}
                    </button>
                    <button v-if="rows == 3" class="keyboard-row-item clear" @click="clearClick">
                        　<img src="./img/del.png" alt="删除">
                    </button>
                </div>
                <!--<div class="keyboard-row keynts">-->
                <!--<button :disabled="isSelectl" v-for="(item,key) in carNumBottom" :key=key-->
                <!--class="keyboard-row-item"-->
                <!--@click="btnBottomNumClick(item)">{{item}}-->
                <!--</button>-->
                <!--</div>-->
            </div>
        </div>
    </div>
</template>

<script>
    import {NavBar, Toast, Dialog, Icon} from 'vant';
    import {mapState} from 'vuex'
    import "./css/parking.css";
    import Cookies from 'js-cookie'

    export default {
        name: 'example',
        data() {
            return {
                isActive: false,
                msg: "暂无停车缴费信息",

                items: [],
                success: true,
                listShow: true,
                show: false,
                username: '',
                password: '',
                numlist: true,
                carNum: "",
                isFeeHourClick: false,
                checkShow: true,
                checkbox: true,
                isDown: false,
                isUp: false,
                selected: null,
                isSelectx: false,
                isSelectl: false,
                key: 1,
                areaName: '粤',
                areaLetter: '',
                numOne: '',
                numTwo: '',
                numThree: '',
                numFour: '',
                numFive: '',
                numSix: '',
                isYue: false,
                keyboardShow: false,
                keyboard: false,
                isA: false,
                isNumOne: false,
                isNumTwo: false,
                isNumThree: false,
                isNumFour: false,
                isNumFive: false,
                isNumSix: false,
                isDisable: false,
                isOne: false,
                isTwo: false,
                isThree: false,
                isFour: false,
                isFive: false,
                isSix: false,
                isSeven: false,
                isEight: false,
                isOther: false,
                typechagel: false,
                carTxt: [
                    {name: ['粤', '渝', '京', '泸', '鄂', '湘', '川', '闽', '晋', '黑']},
                    {name: ['津', '浙', '豫', '赣', '贵', '青', '琼', '宁', '吉', '蒙']},
                    {name: ['翼', '苏', '皖', '桂', '云', '陕', '甘', '藏', '新', '辽']}
                ],
                carNumBottom: ['Z', 'X', 'C', 'V', 'B', 'N', 'M', '学', '警'],
                noneBottom: ['', '', '', '', '', ''],
                noneBottomtxt: ['', ''],
                carNum: [
                    {name: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0']},
                    {name: ['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'O', 'P', '澳']},
                    {name: ['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L', '港']},
                    {name: ['Z', 'X', 'C', 'V', 'B', 'N', 'M', '学', '警']},
                ],
                addedCarNum: '',
                carnump: "",
                token: '',
                couponSwitch: false,
                integralSwitch: false
            }
        },
        watch: {
            checkbox: function (val) {
                this.typechagel = val;
                this.isNumOne = false
                this.isNumTwo = false
                this.isNumThree = false
                this.isNumFour = false
                this.isNumFive = false
                this.isNumSix = false
                this.numSix = ''
                const vm = this
                if (!val) { // 切换到普通车牌
                    if (vm.numFour) {
                        vm.isNumFive = true
                        vm.key = 7
                    }
                } else { // 切换到新能源车牌
                    if (vm.numFive) {
                        vm.isNumSix = true
                        vm.key = 8
                    }
                }
            }
        },
        mounted() {
            document.body.addEventListener('touchstart', function () {
            });
            this.listCar();
        },
        computed: {
            ...mapState({
                userInfo: state => state.user.userInfo,
            })
        },
        methods: {
            carTypeChange(val) {
                this.isNumOne = false
                this.isNumTwo = false
                this.isNumThree = false
                this.isNumFour = false
                this.isNumFive = false
                this.isNumSix = false
                if (!val) { // 切换到普通车牌
                    if (this.numFour) {
                        this.isNumFive = true
                        this.key = 7
                    }
                } else { // 切换到新能源车牌
                    if (this.numFive) {
                        this.isNumSix = true
                        this.key = 8
                    }
                }
            },
            btnClickYue() {
                this.isYue = true
                this.isA = false
                this.isUp = true
                this.isNumOne = false
                this.isNumTwo = false
                this.isNumThree = false
                this.isNumFour = false
                this.isNumFive = false
                this.isNumSix = false
                this.keyboardShow = true
                this.keyboard = 'txt'
                this.key = 1
            },
            btnWordClick(rows, index, i) {
                console.log(this.key);
                console.log(i);
                switch (this.key) {
                    case 1:
                        this.areaName = i
                        break;
                    case 2:
                        this.areaLetter = i
                        break;
                    case 3:
                        this.numOne = i
                        break;
                    case 4:
                        this.numTwo = i
                        break;
                    case 5:
                        this.numThree = i
                        break;
                    case 6:
                        this.numFour = i
                        break;
                    case 7:
                        this.numFive = i
                        break;
                    case 8:
                        this.numSix = i
                        break;
                }
                var num = this.areaName + '-' + this.areaLetter + this.numOne + this.numTwo + this.numThree + this.numFour + this.numFive + this.numSix;
                console.log(num);
                this.cardnum = num;
                this.selected = i;
                if (this.typechagel == true) {
                    if (i == 8) {
                        this.keyboardShow = false;
                        //  this.queryFee(num,true);
                    }
                } else {
                    if (i == 7) {
                        this.keyboardShow = false;
                        // this.queryFee(num,true);
                        // setTimeout(() => {
                        //     this.completeClick('false');
                        // }, 100)
                    }
                }

                if (this.key === 1) {
                    if (this.areaName === '临') {
                        this.areaLetter = ''
                        this.numOne = ''
                        this.numTwo = ''
                        this.numThree = ''
                        this.numFour = ''
                        this.numFive = ''
                        this.numSix = ''
                    }
                    this.areaName = i
                    this.isSelectl = false
                    document.getElementById('letter').click()
                } else if (this.key === 2) {
                    this.areaLetter = i
                    document.getElementById('numOne').click()
                } else if (this.key === 3) {
                    this.numOne = i
                    document.getElementById('numTwo').click()
                } else if (this.key === 4) {
                    this.numTwo = i
                    document.getElementById('numThree').click()
                } else if (this.key === 5) {
                    this.numThree = i
                    document.getElementById('numFour').click()
                } else if (this.key === 6) {
                    this.numFour = i
                    document.getElementById('numFive').click()
                } else if (this.key === 7) {
                    this.numFive = i
                    if (this.checkbox) {
                        document.getElementById('numSix').click()
                    }
                } else if (this.key === 8) {
                    this.numSix = i
                }
                if (this.key === 7 || this.key === 8) {
                    this.carNumBottom = ['Z', 'X', 'C', 'V', 'B', 'N', 'M', '学', '警']
                } else if (this.key === 3 || this.key === 4 || this.key === 5 || this.key === 6) {
                    this.carNumBottom = ['Z', 'X', 'C', 'V', 'B', 'N', 'M', '学', '警']
                }
            },
            btnBottomClick(val) {
                if (val === '新') {
                    if (this.areaName === '临') {
                        this.areaLetter = ''
                        this.numOne = ''
                        this.numTwo = ''
                        this.numThree = ''
                        this.numFour = ''
                        this.numFive = ''
                        this.numSix = ''
                    }
                    this.areaName = '新'
                    this.isSelectx = true
                    this.isSelectl = false
                    document.getElementById('letter').click()
                } else if (val === '使') {
                    this.areaName = '使'
                    this.areaLetter = ''
                    this.numOne = ''
                    this.numTwo = ''
                    this.numThree = ''
                    this.numFour = ''
                    this.numFive = ''
                    this.numSix = ''
                    document.getElementById('letter').click('isLin')
                } else if (val === '民') {
                    this.areaName = '民'
                    this.isSelectl = true
                    this.isSelectx = false
                    this.isDisable = true
                    this.areaLetter = '航'
                    this.numOne = ''
                    this.numTwo = ''
                    this.numThree = ''
                    this.numFour = ''
                    this.numFive = ''
                    this.numSix = ''
                    document.getElementById('letter').click('isLin')
                } else if (val === '鲁') {
                    this.areaName = '鲁'
                    document.getElementById('letter').click('isLin')
                } else if (val === '领') {
                    this.areaName = '领'
                    document.getElementById('letter').click('isLin')
                }
            },
            btnBottomNumClick(i) {
                this.selected = i
                if (this.key === 2) {
                    this.areaLetter = i
                    this.btnClickNum('one')
                } else if (this.key === 3) {
                    this.numOne = i
                    document.getElementById('numTwo').click()
                } else if (this.key === 4) {
                    this.numTwo = i
                    document.getElementById('numThree').click()
                } else if (this.key === 5) {
                    this.numThree = i
                    document.getElementById('numFour').click()
                } else if (this.key === 6) {
                    this.numFour = i
                    document.getElementById('numFive').click()
                } else if (this.key === 7) {
                    this.numFive = i
                    if (this.checkbox) {
                        document.getElementById('numSix').click()
                    }
                } else if (this.key === 8) {
                    this.numSix = i
                }
                var num
                if (!this.checkbox) {
                    num = this.areaLetter + this.numOne + this.numTwo + this.numThree + this.numFour + this.numFive
                } else if (this.checkbox) {
                    num = this.areaLetter + this.numOne + this.numTwo + this.numThree + this.numFour + this.numFive + this.numSix
                }
                if (num.length + i.length == 8 || num.length + i.length == 7) {
                    this.completeClick('false')
                }
            },
            btnClickA() {
                this.isDisable = true
                this.isA = true
                this.isYue = false
                this.isUp = true
                this.isNumOne = false
                this.isNumTwo = false
                this.isNumThree = false
                this.isNumFour = false
                this.isNumFive = false
                this.isNumSix = false
                this.keyboardShow = true
                this.keyboard = 'num'
                this.key = 2
            },
            btnClickNum(name) {
                if (this.isSelectl) {
                    this.isDisable = true
                } else {
                    this.isDisable = false
                }
                this.keyboard = 'num'
                this.keyboardShow = true
                this.isYue = false
                this.isA = false
                this.isNumOne = false
                this.isNumTwo = false
                this.isNumThree = false
                this.isNumFour = false
                this.isNumFive = false
                this.isNumSix = false
                this.isUp = true
                if (name === 'one') {
                    this.isNumOne = true
                    this.key = 3
                } else if (name === 'two') {
                    this.isNumTwo = true
                    this.key = 4
                } else if (name === 'three') {
                    this.isNumThree = true
                    this.key = 5
                } else if (name === 'four') {
                    this.isNumFour = true
                    this.key = 6
                } else if (name === 'five') {
                    this.isNumFive = true
                    this.key = 7
                } else if (name === 'six') {
                    this.isNumSix = true
                    this.key = 8
                }
                if (name === 'five' || name === 'six') {
                    this.carNumBottom = ['Z', 'X', 'C', 'V', 'B', 'N', 'M', '学', '警']
                } else {
                    this.carNumBottom = ['Z', 'X', 'C', 'V', 'B', 'N', 'M', '学', '警']
                }
            },
            completeClick(judge) {
                console.log(judge)
                this.isYue = false
                this.isA = false
                this.isNumOne = false
                this.isNumTwo = false
                this.isNumThree = false
                this.isNumFour = false
                this.isNumFive = false
                this.isNumSix = false
                this.isUp = false
                this.isDown = true
                this.keyboardShow = false
                this.checkShow = true
                var num
                if (!this.checkbox) {
                    num = this.areaName + this.areaLetter + this.numOne + this.numTwo + this.numThree + this.numFour + this.numFive
                } else if (this.checkbox) {
                    num = this.areaName + this.areaLetter + this.numOne + this.numTwo + this.numThree + this.numFour + this.numFive + this.numSix
                }
                if (num === '') {
                    Toast.fail('请输入车牌');
                } else if (this.areaName === '' || this.areaLetter === '' || this.numOne === '' || this.numTwo === '' || this.numThree === '' || this.numFour === '' || this.numFive === '') {
                    Toast.fail('请输入完整车牌');
                } else if (judge === 'true') {
                    this.queryFee(num, true);
                    this.cardnum = num;
                }
            },
            clearClick() {
                if (this.key === 1) {
                    this.areaName = ''
                } else if (this.key === 2) {
                    document.getElementById('font').click()
                    this.areaLetter = ''
                } else if (this.key === 3) {
                    document.getElementById('letter').click()
                    this.numOne = ''
                } else if (this.key === 4) {
                    document.getElementById('numOne').click()
                    this.numTwo = ''
                } else if (this.key === 5) {
                    document.getElementById('numTwo').click()
                    this.numThree = ''
                } else if (this.key === 6) {
                    document.getElementById('numThree').click()
                    this.numFour = ''
                } else if (this.key === 7) {
                    document.getElementById('numFour').click()
                    this.numFive = ''
                } else if (this.key === 8) {
                    document.getElementById('numFive').click()
                    this.numSix = ''
                    this.cardnum = this.areaName + this.areaLetter + this.numOne + this.numTwo + this.numThree + this.numFour + this.numFive
                }
            },
            listCar() {
                this.token = Cookies.get("token")
                this.$api.parking.bindingList({openId: this.token}).then(res => {
                    if (res.code == 0) {
                        this.items = res.list;
                        if(this.items.length == 0){
                            this.success = false;
                        }
                        this.listShow = true;
                    } else {
                        this.listShow = false;
                    }
                })
            },
            addCar() {
                console.log(this.userInfo.mobile)
                if (!this.userInfo.mobile) {
                    Dialog.confirm({
                        message: '绑定手机号码才可绑定车牌，是否立刻绑定？'
                    }).then(() => {
                        this.$router.push('/parking_register')
                    }).catch(() => {
                        return
                    });
                    return
                }

                if (this.items.length >= 3) {
                    Toast.fail('最多可绑定3张车牌')
                    return
                }
                this.clearCarNumber();
                this.success = false;
                this.btnClickA();
            },
            bindingAdd() {
                this.success = true;
                this.keyboardShow = false;
                this.token = Cookies.get("token")
                if (this.cardnum == undefined || this.cardnum == '' || this.cardnum == null || this.cardnum.length < 7) {
                    this.success = false;
                    Toast.fail('请输入完整车牌')
                    return
                }
                var repeat = false
                if (this.items.length > 0) {
                    this.items.forEach((data) => {
                        if (data.numberPlate == this.cardnum) {
                            repeat = true
                        }
                    });
                }
                if (repeat) {
                    Toast.fail('已绑定该车牌')
                    return
                }
                this.$api.parking.bindingAdd({openId: this.token, carNo: this.cardnum}).then(res => {
                    if (res.code == 0) {
                        Toast.fail('添加成功')
                        this.listCar();
                    } else {
                        Toast.fail('操作异常，请联系管理员')
                    }
                })
            },
            delCar(id) {
                Dialog.confirm({
                    message: '您确定要解绑车牌吗？'
                }).then(() => {
                    this.$api.parking.bindingDel({id: id}).then(res => {
                        if (res.code == 0) {
                            Toast.fail('删除成功')
                            this.listCar();
                            this.clearCarNumber();
                        } else {
                            Toast.fail('操作异常，请联系管理员')
                        }
                    })
                }).catch(() => {
                    // on cancel
                });
            },
            btnCanel() {
                if(this.items.length > 0){
                    this.success = true;
                    this.keyboardShow = false;
                }
            },
            clearCarNumber() {
                this.areaLetter = ''
                this.numOne = ''
                this.numTwo = ''
                this.numThree = ''
                this.numFour = ''
                this.numFive = ''
                this.numSix = ''
            }
        }
    }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
    .van-checkbox__label {
        margin-left: 5px !important;
        color: #999;
    }

    .window {
        padding: 32px 32px 150px;
    }

    .list {
        padding: 16px 0;
    }

    .top {
        font-size: 1.2em;
        text-align: center;
        padding-bottom: 10px;
        border-bottom: 5px solid;
    }

    ul li {
        padding-top: 3.33333vw;
        font-size: 1.1em;
    }

    .del-btn {
        float: right;
        width: 45px;
        border: 0;
        font-size: 12px;
        line-height: 22px;
        border-radius: 100px;
        color: white;
        background: #0290FF;
    }

    .addCar {
        left: 0;
        position: fixed;
        bottom: 54px;
        padding-bottom: 20px;
        width: 100%;
        background-color: #f4f4f4;
        text-align: center;
    }

    .addCar-btn {
        width: 222px;
        border: 0;
        font-size: 17px;
        line-height: 37px;
        border-radius: 5px;
        color: white;
        background: #0290FF;
    }

    //键盘
    .content-car-number {
        text-align: center;
        height: 110px;
        padding-bottom: 20px;

        .car-content-title {
            display: block;
            justify-content: space-between;
            padding: 0 32px;
            margin-bottom: 10px;

            span {
                font-size: 15px;
            }

            .ze-checkbox {
                display: flex;
                align-items: center;
            }

            .ze-radio-text {
                font-size: 13px;
            }

            .ze-checkbox-icon {
                color: #FFEDB1 !important;
                margin-right: 8px;
            }
        }

        .content-section {
            .content-section-flex {
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 20px;
                margin-bottom: 5px;

                .blank-border {
                    height: 34px;
                    width: 1px;
                    border-right: 1px solid #E8E8E8;
                    float: left;
                    margin-left: 0px;
                    z-index: 1;
                    margin-top: 3px;

                    &.blank-border-first {
                        margin-top: 3px;
                        position: relative;
                        top: -3px;
                    }
                }

                &.flex-card {
                    color: #000;

                    .flex-btn {
                        width: 40px;
                        height: 40px;
                        border: none;
                        text-align: center;
                        background: #fff;
                        font-size: 20px;
                        color: #000;
                        border-radius: 10px;
                    }

                    .flex-btns {
                        text-align: center;
                        background: #fff;
                        width: fit-content;
                        position: relative;
                        height: 40px;
                        border-radius: 10px;

                        button {
                            width: 35px;
                            height: 40px;
                            border: none;
                            font-size: 20px;
                            color: #000;
                            border-radius: 50%;
                            background: transparent;
                            float: left;
                            margin-left: 0px;
                            z-index: 2;
                            position: relative;

                            &:first-child {
                                margin-left: 0;
                            }
                        }
                    }

                    .flex-mid {
                        margin: 0 0.1rem;

                        span {
                            display: block;
                            width: 10px;
                            height: 10px;
                            border-radius: 50%;
                            background: #ddd;
                        }
                    }

                    .isClick {
                        border: 1px solid #ffc200; /*no*/
                        z-index: 50;
                        border-radius: 0px;
                    }

                    .isNumClick {
                        border-radius: 0px !important;
                        border: 1px solid #ffc200 !important; /*no*/
                        z-index: 10;
                        background-color: #fff !important;
                    }
                }

                .flex-card-border {
                    border: 1px solid #ddd; /*no*/
                    border-radius: 8px;
                    background: #fff;
                    position: relative;
                }
            }
        }
    }

    .fee-hours {
        padding: 0 32px;
        margin-bottom: 80px;

        .fee-hours-title {
            margin-bottom: 16px;
            font-size: 15px;
        }

        .fee-hours-content {
            display: flex;
            justify-content: space-between;
            margin-bottom: 32px;

            &.fee-hours-num {
                display: block;
            }
        }

        .fee-hours-num {
            width: 102px;
            height: 34px;
            font-size: 13px;
            background: #ececec;
            border-radius: 8px;
            text-align: center;
            line-height: 34px;
        }

        .isFeeHour {
            background: #ffeeb1;
        }
    }

    .searchPay-btn {
        text-align: center;
        /*background-color: #f6f6f6;*/
        margin: 0 32px 0;

        button {
            border-radius: 8px;
            margin-bottom: 20px;

            &.searchPay-btn-click {
                box-shadow: 0px 5px 10px 0px rgba(255, 227, 135, 1);
                background: #ffc200;
                color: #101010;
            }
        }
    }

    .keyboard {
        width: 100%;
        height: 300px;
        position: fixed;
        bottom: -300px;
        background: #eeeeee;
        z-index: 10000000;

        &.animationDown {
            animation: slide_dowms 0.3s ease-out;
            animation-fill-mode: forwards;
        }

        &.animationUp {
            animation: slide_ups 0.3s ease-out;
            animation-fill-mode: forwards;
        }

        .btn-complete {
            height: 40px;
            text-align: right;
            color: #ffc200;
            font-size: 16px;
            width: 100%;
            background: #fff;
            border: none;
            border-top: 1px solid #eee;
            margin-bottom: 10px;

            span {
                margin-right: 15px;
            }
        }

        .keyboard-row {
            margin-top: 10px;
            display: flex;
            justify-content: space-between;
            padding: 0 8px;
            color: #333;

            &:first-child {
                margin-top: 5px;
            }

            .keyboard-row-items {
                display: flex;
                justify-content: left;
            }

            .keyboard-row-bottom {
                display: flex;
                justify-content: space-between;
            }

            .keyboard-row-item {
                width: 9.5%;
                height: 50px;
                background: #fff;
                font-size: 15px;
                text-align: center;
                border: 1px solid #ccc; /*no*/
                border-radius: 5px;
                color: #333;

                &.bottom {
                    height: 8.8%;
                    width: 68px;
                    line-height: 35px;
                    background: #fff;
                    color: #333;
                    /*margin-right: 0.08rem;*/
                }

                &.clear {
                    width: 9.5%;
                    height: 50px;
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    img {
                        width: 100%;
                    }
                }
            }

            .none-botton {
                border: none;
                height: 40px;
                width: 8.8%;
                visibility: hidden;
            }
        }

        button {
            &:active {
                background: #f4f4f4 !important;
                color: #999 !important;
                height: 50px !important;
                margin-top: -5px !important;
            }
        }
    }

    @keyframes slide_ups {
        from {
            bottom: -300px;
        }
        to {
            bottom: 0px;
        }
    }

    @keyframes slide_dowms {
        from {
            bottom: 0px;
        }
        to {
            bottom: -320px;
        }
    }

    button:disabled {
        background: #f4f4f4 !important;
        color: #8f8f8f !important;
    }

    .active {
        &:active {
            background: #f4f4f4 !important;
            color: #999 !important;
        }
    }

    .van-checkbox {
        float: right;
        padding-right: 6px;
        font-size: 14px;
    }

    .van-checkbox__icon .van-icon {
        width: 11px !important;
        height: 11px !important;
        position: relative;
        top: 6px;
    }

    .paybtn {
        height: 40px;
        line-height: 37px;
        background: #0290FF;
        border: 1px solid #0290FF;
        width: 100%;
        float: right;
    }

    .noCar {
        padding: 80px;
        text-align: center;
    }

    .noCar img {
        width: 70px
    }

    .noCar p {
        margin: 2px
    }

    .park-detail {
        text-align: left;
        padding: 8vw 8.26667vw 0;
        font-size: 3.73333vw;
        line-height: 5.33333vw;
        color: #909293;
        box-sizing: border-box;
        height: 100%;
        outline: none;
        overflow-y: auto;
        -o-tab-size: 4;
        tab-size: 4;
        -moz-tab-size: 4;
        white-space: pre-wrap;
        word-wrap: break-word;
        width: 100%;
    }

</style>